import React, { PureComponent, Fragment } from 'react';
import { connect } from 'dva';
import { Card, Form, Modal, List, } from 'antd';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import styles from './Applications.less';
import router from 'umi/router';
import { formatWan } from '@/utils/utils';
import RecordModal from './RecordModal';
import { powerBtnFunc } from "@/utils/utils";

const confirm = Modal.confirm;

@connect(({ merchant, loading }) => ({
  merchant,
  loading: loading.models.merchant,
}))

@Form.create()
class Merchant extends PureComponent {
  state = {
    lookRecordView: false,
    selectedRows: {},
  };

  constructor(props) {
    super(props);
  }

  componentDidMount() {
    const { dispatch } = this.props;
    dispatch({
      type: 'merchant/fetch',
      payload: {
        pageSize: 99999999,
      },
    });
  }

  //查看
  handleLookDesc = (record) => {
    router.push({
      pathname: '/inloan/merchant/desc',
      query: {
        enterpriseNo: record.enterpriseNo,
      },
    });
  };
  showRecordModal = (flag, item) => {
    console.log(flag);
    let _this = this;
    const { dispatch } = this.props;
    if (flag) {
      this.setState({
        selectedRows: item,
      });
      dispatch({
        type: 'merchant/withdrawList',
        payload: {
          enterpriseNo: item.enterpriseNo, pageSize: 10,
        },
        callback(res) {
          _this.setState({
            lookRecordView: !!flag,
          });
        },
      });
    } else {
      _this.setState({
        lookRecordView: !!flag,
      });
    }
  };

  handleStandardTableChange = (pagination, filtersArg, sorter) => {
    const { dispatch } = this.props;
    const { selectedRows } = this.state;
    const params = {
      pageNo: pagination.current,
      pageSize: pagination.pageSize,
    };

    dispatch({
      type: 'merchant/withdrawList',
      payload: {
        enterpriseNo: selectedRows.enterpriseNo, ...params,
      },
    });
  };

  allWithdraw(e) {
    const {  dispatch } = this.props;
    confirm({
      title: `确定`,
      content: `你确定全部${e.balance}提现?`,
      okText: '确认',
      cancelText: '取消',
      onOk() {
        dispatch({
          type: 'merchant/withdraw',
          payload: { enterpriseNo: e.enterpriseNo },
          callback(res) {
            window.open(res.msg.url);
          },
        });
      },
      onCancel() {
        console.log('Cancel');
      },
    });
  }

  render() {
    const { merchant: { data, withdrawList }, loading } = this.props;
    const { lookRecordView } = this.state;
    const list = data.data;
    const CardInfo = ({ withdrawAmount, balance }) => (
      <div className={styles.cardInfo}>
        <div>
          <p>可提现金额</p>
          <p>{withdrawAmount || 0}</p>
        </div>
        <div>
          <p>余额</p>
          <p>{balance}</p>
        </div>
      </div>
    );
    return (
      <div className={styles.filterCardList}>

        <PageHeaderWrapper title="商户端管理">
          <List
            rowKey="enterpriseNo"
            style={{ marginTop: 24 }}
            grid={{ gutter: 24, xl: 4, lg: 3, md: 3, sm: 2, xs: 1 }}
            loading={loading}
            dataSource={list}
            renderItem={item => (
              <List.Item key={item.enterpriseNo}>
                <Card
                  hoverable
                  bodyStyle={{ paddingBottom: 20 }}
                  actions={[
                    powerBtnFunc('100110', <span onClick={() => (
                      this.handleLookDesc(item)
                    )}>详情</span>),
                    powerBtnFunc('100112',
                      <span onClick={() => (
                        this.showRecordModal(true, item)
                      )}>提现记录</span>,
                    ),
                    powerBtnFunc('100123',
                    <span onClick={() => (
                      this.allWithdraw(item)
                    )}>提现</span>,
                    )
                  ]}
                >
                  <Card.Meta title={item.enterpriseName}/>
                  <div className={styles.cardItemContent}>
                    <CardInfo
                      balance={item.balance}
                      withdrawAmount={item.withdrawAmount}
                    />
                  </div>
                </Card>
              </List.Item>
            )}
          />

        </PageHeaderWrapper>
        {withdrawList ?
          <RecordModal
            withdrawList={withdrawList}
            lookRecordView={lookRecordView}
            showRecordModal={this.showRecordModal}
            pageChange={this.handleStandardTableChange}
          />
          : ''}
        {/*<DescView />*/}
      </div>
    );
  }
}

export default Merchant;
